import IntegrationTable, {
	IntegrationTableProps,
	OperatingItem,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { Button, message, Popconfirm, Space } from "antd";
import Search from "antd/lib/input/Search";
import { user, status, remove } from "./service";
import { arrayToObject, getArray } from "phinney-toolkit";
import { DynamicFormItem } from "@/components/DynamicForm";
import { Image, Cascader } from "antd";
import { classify } from "./service";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	let userList: any[] = [];
	let [classifyList, setClassifyList] = useState<any>([]);

	const getClassifyList = async () => {
		const res = await classify({
			classifyType: 300,
		});
		setClassifyList(res.data);
	};

	const itemSubTypeList = [
		{ label: "黄纸", value: "11" },
		{ label: "花纸", value: "12" },
		{ label: "塑料瓶子", value: "21" },
		{ label: "玻璃瓶子", value: "22" },
	];

	const itemType = [
		{ label: "废纸", value: "10" },
		{ label: "瓶子", value: "20" },
		{ label: "大件", value: "30" },
		{ label: "电器", value: "40" },
		{ label: "金属", value: "50" },
		{ label: "玻璃", value: "60" },
	];

	// 获取用户列表
	const getUserList = async () => {
		const res = await user();

		userList = getArray(res?.data);

		return userList;
	};

	// 表格项
	const columns: ProColumns[] = [
		{
			title: "类目ID",
			dataIndex: "itemCode",
			search: false,
		},
		{
			title: "类别",
			dataIndex: "classifyName",
			search: false,
		},
		{
			title: "类目图片",
			dataIndex: "itemIcon",
			search: false,
			render: (_, record: any) => {
				if (record.itemIcon) {
					return (
						<Image.PreviewGroup>
							<Image
								src={record.itemIcon}
								style={{ padding: 8 }}
								width={50}
								alt=""
							/>
						</Image.PreviewGroup>
					);
				} else {
					return <div>-</div>;
				}
			},
		},
		{
			title: "类目描述",
			dataIndex: "itemDesc",
			search: false,
		},
		{
			title: "类目名称",
			dataIndex: "itemName",
		},
		{
			title: "类目价格",
			dataIndex: "itemPrice",
			search: false,
			render: (_, record: any) => {
				return record.itemPrice / 100;
			},
		},

		{
			title: "类目单位",
			dataIndex: "itemUnit",
			search: false,
		},
		{
			title: "排序",
			dataIndex: "sort",
			search: false,
		},
	];

	// 表单项
	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		return [
			{
				type: "text",
				label: "类目描述",
				name: "itemDesc",
				required: true,
			},
			{
				type: "text",
				label: "类目名称",
				name: "itemName",
				required: true,
			},
			{
				type: "number",
				label: "上门回收单价(元)",
				name: "itemOnlinePrice",
				required: true,
			},
			{
				type: "number",
				label: "类目价格(元)",
				name: "itemPrice",
				required: true,
			},
			{
				type: "text",
				label: "类目单位",
				name: "itemUnit",
				required: true,
			},
			{
				type: "number",
				label: "排序",
				name: "sort",
				required: true,
			},
			{
				type: "upload",
				label: "类目图片",
				name: "itemIcon",
				fieldProps: {
					limit: 1,
				},
			},
			{
				type: "custom",
				label: "类别",
				name: "classifyId",
				required: true,
				render: (form: any, record: any) => {
					return (
						<div>
							<Cascader
								defaultValue={[record.classifyName] || ""}
								options={classifyList}
								fieldNames={{
									label: "classifyName",
									value: "id",
									children: "list",
								}}
								onChange={(item) => {
									form.setFieldsValue({
										classifyId: item[item.length - 1],
									});

									vm.setState({
										isTrue: item[item.length - 1],
									});
								}}
								placeholder="请选择类别~"
							/>
						</div>
					);
				},
			},
			...(vm.state.isTrue == 148
				? [
						{
							type: "text",
							label: "书籍捐赠平均数",
							name: "bookMaxNum",
							required: true,
						},
				  ]
				: []),
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "itemCode",
		scroll: { x: 1000 },
		columns,
		listProps: {
			url: "/item/list",
			method: "GET",
			requestType: "params",

			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		addProps: {
			url: "/item/add",
			formProps: {
				labelCol: { span: 8 },
			},
			modalProps: {
				formProps: {
					labelCol: { span: 8 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm, true);
				},
			},
			paramsHandle: ({ ...params }): any => {
				params.itemIcon = (
					params?.itemIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
					itemPrice: (Number(params.itemPrice) * 100).toFixed(0),
					itemOnlinePrice: (Number(params.itemOnlinePrice) * 100).toFixed(0),
				};
			},
		},
		updateProps: {
			url: "/item/edit",
			method: "POST",
			paramsHandle: ({ ...params }): any => {
				params.itemIcon = (
					params?.itemIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
					itemPrice: (Number(params.itemPrice) * 100).toFixed(0),
					itemOnlinePrice: (Number(params.itemOnlinePrice) * 100).toFixed(0),
				};
			},
			formProps: {
				labelCol: { span: 8 },
			},
			modalProps: {
				formProps: {
					labelCol: { span: 8 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm, true);
				},
				formValuesHandle: async (record: any) => {
					return {
						...record,
						itemIcon: record.itemIcon
							? [
									{
										uid: "-1",
										status: "done",
										name: record.itemIcon,
										url: record.itemIcon,
									},
							  ]
							: [],
						itemPrice: record.itemPrice / 100,
						itemOnlinePrice: record.itemOnlinePrice / 100,
					};
				},
			},
		},
		deleteProps: {
			url: "/item/del",
			method: "POST",
		},
	};

	// 初始化加载数据
	useEffect(() => {
		getClassifyList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
